<template>
  <div id="app">
    <div class="main clearfix">
      <div class="nav-left">
        <el-row class="tac">
          <el-col :span="22">
            <el-menu
              default-active="2"
              class="el-menu-vertical-demo"
              background-color="#545c64"
              text-color="#fff"
              active-text-color="#ffd04b">

              <router-link v-bind="{to:'/right/'+index}" v-for="(item,index) in this.configData">
                <el-menu-item
                  :index="index.toString()"
                  @open="openMenu"
                >
                    <i class="el-icon-menu"></i>
                    <span slot="title">{{item.showName}}</span>
                </el-menu-item>
              </router-link>
              <!--<el-submenu index="2">-->
                <!--<template slot="title">-->
                  <!--<i class="el-icon-location"></i>-->
                  <!--<span>导航一</span>-->
                <!--</template>-->
                <!--<el-menu-item-group>-->
                  <!--<template slot="title">分组一</template>-->
                  <!--<el-menu-item index="1-1">选项1</el-menu-item>-->
                  <!--<el-menu-item index="1-2">选项2</el-menu-item>-->
                <!--</el-menu-item-group>-->
                <!--<el-menu-item-group title="分组2">-->
                  <!--<el-menu-item index="1-3">选项3</el-menu-item>-->
                <!--</el-menu-item-group>-->
                <!--<el-submenu index="1-4">-->
                  <!--<template slot="title">选项4</template>-->
                  <!--<el-menu-item index="1-4-1">选项1</el-menu-item>-->
                <!--</el-submenu>-->
              <!--</el-submenu>-->

            </el-menu>
          </el-col>
        </el-row>

        <router-link to="/login">
          dd
        </router-link>
      </div>
      <router-view class="right"/>
    </div>

  </div>
</template>

<script>
  import data from "../../static/js/data"
  export default {
    name: 'Home',
    data(){return{
      configData:data.submitConfig,
      configTable:"",
    }},
    methods:{
      openMenu(index) {
        console.log("Home openMenu=" + index)
        this.configTable = this.configData[index];
      }
    }
  }
</script>

<style>
  #app {
    width: 100%;
    height: 100%;
    padding: 20px;
    font-family: 'Avenir', Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    box-sizing: border-box;
  }

  .main{
    height: 100%;
  }
  .nav-left {
    float: left;
    height: 100%;
    width: 20%;
  }

  .right {
    float: left;
    height: 100%;
    width: 80%;
  }
</style>
